<template>
  <div>
    <div class="header">
      <span style="margin-right: 20px">搜索用户数</span>
      <svg
        t="1653801546529"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2158"
        width="200"
        height="200"
      >
        <path
          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
          p-id="2159"
        ></path>
        <path
          d="M512 336m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z"
          p-id="2160"
        ></path>
        <path
          d="M536 448h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
          p-id="2161"
        ></path>
      </svg>
    </div>
    <div class="main" style="margin: 10px 0">
      <span style="margin-right: 30px">12321</span>
      <span style="margin-right: 30px">17.1</span>
      <svg
        t="1653801741783"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3605"
        width="200"
        height="200"
      >
        <path
          d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3c-3.8 5.3-0.1 12.7 6.5 12.7h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
          p-id="3606"
        ></path>
      </svg>
      <svg
        t="1653801775016"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4396"
        width="200"
        height="200"
      >
        <path
          d="M512 608c-6.4 0-19.2 0-25.6-6.4l-128-128c-12.8-12.8-12.8-32 0-44.8s32-12.8 44.8 0L512 531.2l102.4-102.4c12.8-12.8 32-12.8 44.8 0s12.8 32 0 44.8l-128 128C531.2 608 518.4 608 512 608z"
          p-id="4397"
        ></path>
      </svg>
    </div>
    <div class="footer">
      <div class="charts" ref="charts" style="width: 100%; height: 80px"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  props: {},
  name: "",
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {
    let myChart = echarts.init(this.$ref.charts);
    myChart.setOption({
      xAxis: {
        // 隐藏x轴
        show: false,
        type: "category",
      },
      yAxis: {
        // 隐藏y轴
        show: false,
      },
      series: [
        {
          type: "line",
          data: [10, 7, 33, 12, 8, 9],
          // 拐点样式
          itemStyle: {
            opacity: 0,
          },
          // 线段颜色
          lineStyle: {
            color: "purple",
          },
          // 区域填充颜色
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "purple", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#fff", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
      grid: {
        left: 0,
        top: 0,
        bottom: 0,
        right: 0,
      },
    });
  },
  watch: {},
  methods: {},
  components: {},
};
</script>

<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;
}
</style>
